<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Ajax练习_聊天室^_^</title>
    <link href="css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #b3d6ff;
        }
        a, #animation {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        form{
            border: #f300ff inset 3px;
            padding: 10px;
            background: #d3e5ff;
        }
        form p{
            width: 100%;
            height: 240px;
            border: #ffb83b 3px solid;
            padding: 20px;
            background: #faffec;
            opacity: 0.8;
            overflow: scroll;
        }
        #loading{
            position: fixed;
            left: 50%;
            top: 50%;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>jQuery与ajax的应用</h1>
    <hr>
    <br>
    <h3>ajax实现聊天室</h3>
    <div class="row" >
        <div class="col-md-8 col-md-offset-2">
            <form action="" id="form">
                <div class="form-group">
                    <label for="msg">来自服务器的消息：</label><br>
                    <p class="table-bordered" id="msg"></p>
                </div>
                <div class="form-group">
                    <label for="author">姓名：</label>
                    <input id="author" name="message.author" value="爱因斯坦">
                    <br>
                    <label for="content">内容：</label>
                    <input id="content" name="message.content" style="width: 80%" value="在一个崇高的目标支持下，不停地工作，即使慢，也一定会获得成功。">
                </div>
                <div class="form-group">
                    <input class="btn btn-success" type="button" id="btn_sub" value="发送">
                </div>
            </form>
        </div>
    </div>
	<div id="loading" class= "table-bordered btn-warning img-thumbnail" style="display: none" >加载中。。。</div>
    <div style="height: 500px"></div>
</div>
<script>
var timeStamp = 0;
$(function(){
    $(document).ajaxStart(function(){
        $("#loading").show();
    });
    $(document).ajaxStop(function(){
        $("#loading").hide();
    });

    updateMsg();
    $("#btn_sub").click(function(){
        $.post("chatroom/ajaxForm",
        $("#form").serialize(),
            function(data){
                addMessage(data);
                $("#content").val("");
            }
        )
    })
});
function updateMsg(){
    $.post("chatroom/getMsg", {time: timeStamp },function(xml){
        addMessage(xml);
    })
    setTimeout('updateMsg()',5000)
}

function addMessage(xml){
    //$("status",xml)可以取出status节点
    if($("status",xml).text() == 2){
        return;
    }
    $("#msg").empty();
    timeStamp = $("timeStamp",xml).text();
//    alert("'timeStamp',xml).text():"+timeStamp)
    $("msg",xml).each(function(){
        var author = $("author",this).text();
        var content = $("content",this).text();
        var html = '<strong>'+author+':</strong><br>'+content+'<br style="line-height:2em">';
        $("#msg").append(html)
    })

}





</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>